<template>
	<view class="profile-page">
		<image class="page-bg" src="/static/common/page_bg1.png"></image>
		<view class="page-content" :style="{paddingTop:$u.sys().statusBarHeight+'px'}">
			<view class="header" @click="navigatorPage('/pages/authentication/authentication')">
				<image class="icon_user" src="../../static/common/icon_hy.png" />
				<view class="auth-center">认证中心</view>
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
			<view class="user-info">
				<view class="user-avatar-wrapper" @click="navigatorPage('/pages/mine/user-info')">
					<image class="user-avatar" :src="$OssUrl(userInfo.avatar)" mode="aspectFill" v-if="isLogin" />
					<image class="user-avatar" src="../../static/default_avatar.png" mode="aspectFill" v-if="!isLogin" />
					<image class="camera-icon" src="../../static/mine/icon_xj.png" />
				</view>
				<view class="login-section">
					<view class="login-text">
						<view class="user-box">
							<text class="login-title" v-if="!isLogin" @click="navigatorPage('/pages/login/login',false)"> 登录/注册 </text>
							<text class="login-title" v-else>
								{{userInfo.nickname}}
							</text>
							<view class="vip-tag" v-if="userInfo.vip">
								<image class="vip-icon" src="../../static/mine/icon_vip2.png" />
							</view>
						</view>
						<image class="settings" src="../../static/mine/icon_setting.png" @click="navigatorPage('/pages/setting/setting')" />
					</view>
					<text class="welcome-text" v-if="!isLogin">Hi, 欢迎登录</text>
					<text class="welcome-text" v-if="isLogin">ID:{{userInfo.id}}</text>
					<view class="user-bottom" v-if="isLogin&&userInfo&&userInfo.gender==1">
						<view class="diamond-section" @click="navigatorPage('/pages/mine/diamond-recharge')">
							<image class="diamond-icon" src="../../static/mine/icon_zs.png" />
							<text class="diamond-text">钻石: {{userInfo.score}}</text>
						</view>
						<view class="unlock-btn" @click="handleUnlock">
							<text class="unlock-text">免费解锁: {{userInfo.unlock_num}}次</text>
						</view>
					</view>
				</view>
			</view>
			<view class="statistics">
				<view class="stat-item" @click="navigatorPage('/pages/mine/my-love')">
					<text class="stat-number" v-if="isLogin">{{userInfo.focus_count||0}}</text>
					<text class="stat-number" v-else>**</text>
					<text class="stat-label">我喜欢</text>
				</view>
				<view class="stat-item" @click="navigatorPage('/pages/mine/love-me')">
					<text class="stat-number" v-if="isLogin">{{userInfo.fans_count||0}}</text>
					<text class="stat-number" v-else>**</text>
					<text class="stat-label">喜欢我</text>
				</view>
				<view class="stat-item" @click="navigatorPage('/pages/mine/unlock_record')">
					<text class="stat-number" v-if="isLogin">{{userInfo.unlock_count||0}}</text>
					<text class="stat-number" v-else>**</text>
					<text class="stat-label">解锁</text>
				</view>
				<view class="stat-item" @click="navigatorPage('/pages/mine/view-me')">
					<text class="stat-number" v-if="isLogin">{{userInfo.view_count||0}}</text>
					<text class="stat-number" v-else>**</text>
					<text class="stat-label">访客</text>
				</view>
			</view>
			<view class="vip-card" @click="navigatorPage('/pages/mine/vip-recharge')" v-if="userInfo&&userInfo.gender==1">
				<view class="vip-left">
					<image class="vip-badge" src="../../static/mine/icon_vip.png" mode="widthFix" />
					<view>
						<view class="vip-title">我的特权</view>
						<view class="vip-time" v-if="userInfo&&userInfo.vip">到期时间:{{userInfo.vipInfo.expiredate}}</view>
					</view>
				</view>
				<view class="vip-right">
					<text class="vip-action" v-if="userInfo&&!userInfo.vip">首充优惠</text>
					<text class="vip-action" v-if="userInfo&&userInfo.vip">续费</text>
					<image class="vip-arrow" src="../../static/mine/icon_right.png" />
				</view>
			</view>
			<view class="daily-bonus" v-if="userInfo&&userInfo.gender==1">
				<image class="bonus-icon" src="../../static/mine/icon_js.png" />
				<text class="bonus-text">每天赠送免费解锁10次，一个月300次</text>
			</view>
			<view class="tab-section">
				<u-subsection :list="tabs" :current="currentTab" bgColor="transparent" fontSize="14" activeBg="#FEECFF" activeColor="#F169F6" @change="sectionChange"></u-subsection>
			</view>
			<view v-show="currentTab==0">
				<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true" :refresher-enabled="false" :auto="false" :auto-show-back-to-top="true">
					<view class="dynamics-list">
						<view class="dynamics-item" v-for="(item, index) in dataList" :key="index" @click="handleDynamics(item)">
							<view class="item-top">
								<view class="top-left">
									<span style="font-size: 36rpx;font-weight: bold;color: #323334;">{{item.day}}</span>
									<span>/{{item.month}}</span>
								</view>
								<image src="../../static/common/icon_more.png" class="icon-more"></image>
							</view>
							<view class="item-center">
								<view class="item-content">{{item.content}}</view>
								<view class="item-images">
									<u-album :urls="item.images_text" maxCount="3" :multipleSize="80" :singleSize="152"></u-album>
								</view>
							</view>
							<view class="item-bottom">
								<view class="bottom-left">
									<span style="color: #9A9A9A;margin-right: 10rpx;">发布于:</span>
									{{item.city}} {{item.createtime_text}}
								</view>
								<view class="bottom-right">
									<image class="icon" src="../../static/mine/icon_heart.png" />
									{{item.fav_count}}
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
			<view class="menu-list" v-show="currentTab==1">
				<view class="menu-item" @click="showOnline=true" v-if="isLogin">
					<image class="menu-icon" src="../../static/mine/icon_zt.png" />
					<text class="menu-text">状态</text>
					<text class="menu-status" v-if="userInfo.user_status==1">在线</text>
					<text class="menu-status" v-if="userInfo.user_status==2">隐身</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
				<view class="menu-item" @click="navigatorPage('/pages/share/share')">
					<image class="menu-icon" src="../../static/mine/icon_fx.png" />
					<text class="menu-text">分享APP</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
				<view class="menu-item" @click="navigatorPage('/pages/help/help',false)">
					<image class="menu-icon" src="../../static/mine/icon_kf.png" />
					<text class="menu-text">帮助与客服</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
				<view class="menu-item" @click="navigatorPage('/pages/follow/follow',false)">
					<image class="menu-icon" src="../../static/mine/icon_gz.png" />
					<text class="menu-text">关注公众号</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
				<view class="menu-item" @click="openExternalBrowser('https://yuanding.bigchun.com/daili/#/')" v-if="userInfo && userInfo.type==1">
					<image class="menu-icon" src="../../static/mine/icon_dls.png" />
					<text class="menu-text">代理商</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<u-popup :show="showOnline" round="24rpx" :safeAreaInsetBottom="false">
			<view class="popup-container">
				<view class="popup-content">
					<view class="popup-header">
						<view class="close-btn"></view>
						<view class="popup-title">
							<uni-text class="title">状态</uni-text>
							<uni-text class="desc">非在线状态时，不会以在线主动列刚中</uni-text>
						</view>
						<image class="close-btn" src="/static/mine/icon_close.png" @click="handleClose" />
					</view>
					<view class="status-list">
						<view class="status-item" :class="{'status-item--selected': selectedIndex === index}" v-for="(item, index) in statusList" :key="index" @click="handleSelect(index)">
							<image class="status-icon" :src="item.icon" />
							<uni-text class="status-text">{{ item.text }}</uni-text>
						</view>
					</view>
					<view class="button-wrapper">
						<button class="save-button" @click="handleSave">保存</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showDynamics" round="24rpx" :safeAreaInsetBottom="false">
			<view class="popup-container">
				<view class="popup-content">
					<view class="popup-header">
						<view class="popup-title">
							<uni-text class="title">分享</uni-text>
						</view>
					</view>
					<view class="menupopup-list">
						<view class="menupopup-item" v-for="(item, index) in dynamicsList" :key="index" @click="handleMenuDynamics(index)">
							<image class="menupopup-icon" :src="item.icon" />
							<uni-text class="menupopup-text" :style="{color:item.color}">{{ item.text }}</uni-text>
						</view>
					</view>
					<view class="button-wrapper">
						<button class="save-button  save-button2" @click="showDynamics= false">取消</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showVip" round="24rpx" :safeAreaInsetBottom="false">
			<view class="popup-container">
				<view class="popup-content">
					<view class="popup-header">
						<view class="close-btn"></view>
						<view class="popup-title">
							<uni-text class="title">解锁次数</uni-text>
							<uni-text class="desc">今日剩余免费解锁：{{userInfo.unlock_num}}次</uni-text>
						</view>
						<image class="close-btn" src="/static/mine/icon_close.png" @click="showVip = false" />
					</view>
					<view class="tips-list">
						<view class="tips-item">
							<view class="dot"></view>专属认证标识，优先推荐
						</view>
						<view class="tips-item">
							<view class="dot"></view>认证提示，交友更放心
						</view>
					</view>
					<view class="vip-info" @click="navigatorPage('/pages/mine/vip-recharge')">
						<view class="vip-top">
							<image class="vip-badge" src="../../static/mine/icon_vip3.png" />
							<text class="vip-title">我的特权</text>
						</view>
						<view class="vip-center" v-if="userInfo&&userInfo.vipInfo">
							<view>剩余{{userInfo.vipInfo.remaindays}}天</view>
						</view>
						<view class="vip-bottom">
							<text class="vip-action">续费</text>
							<image class="vip-arrow" src="../../static/mine/icon_right.png" />
						</view>
					</view>
					<view class="button-wrapper">
						<button class="save-button" @click="showVip= false">确认</button>
					</view>
				</view>
			</view>
		</u-popup>
		<toLogin ref="lRef"></toLogin>
		<browser-mask></browser-mask>
	</view>
</template>
<script>
	import toLogin from "@/components/toLogin.vue";
	import browserMask from "@/components/browserMask/browserMask.vue";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			toLogin,
			browserMask
		},
		data() {
			return {
				tabs: ['动态', '功能'],
				currentTab: 1,
				userInfo: {
					avatar: '',
				},
				dataList: [],
				showVip: false,
				dynamicsDetail: null,
				showDynamics: false,
				dynamicsList: [{
					text: '分享',
					color: '#9A9A9A',
					icon: '/static/mine/icon_fx2.png',
				}, {
					text: '删除',
					color: '#FF3E3E',
					icon: '/static/mine/icon_sc.png',
				}],
				showOnline: false,
				selectedIndex: 0,
				statusList: [{
					text: '在线',
					status: '1',
					icon: '/static/mine/status_online.png',
				}, {
					text: '隐身',
					status: '2',
					icon: '/static/mine/status_no.png',
				}, {
					text: '附近2KM不可见',
					status: '3',
					icon: '/static/mine/status_view.png',
				}, {
					text: '附近5KM不可见',
					status: '4',
					icon: '/static/mine/status_view.png',
				}]
			}
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
				this.queryList(1, 10)
			} else {
				this.userInfo = {
					avatar: '',
				}
			}
			this.init()
		},
		onBackPress() {
			if (this.showOnline || this.showDynamics || this.showVip || this.$refs.lRef.show) {
				this.showOnline = false
				this.showDynamics = false
				this.showVip = false
				this.$refs.lRef.close()
				return true
			}
		},
		methods: {
			init() {
				uni.showTabBar()
				uni.setTabBarStyle({
					backgroundColor: '#FFF',
					borderStyle: "black"
				})
			},
			//页面跳转
			navigatorPage(page, auth = true) {
				if (auth && !this.isLogin) {
					this.$refs.lRef.open()
					return
				} else {
					this.$Tips(page)
				}
			},
			handleUnlock() {
				if (!this.userInfo.vip) {
					return this.$Toast('未开通VIP')
				} else {
					this.showVip = true
				}
			},
			handleDynamics(item) {
				this.dynamicsDetail = item
				this.showDynamics = true
			},
			handleMenuDynamics(index) {
				if (index == 0) {
					return this.$Toast('功能开发中')
				}
				this.$Api['user'].delForumInfo({
					forum_id: this.dynamicsDetail.id,
				}).then(res => {
					this.showDynamics = false
					this.$Toast('删除成功')
					this.$refs.paging.refresh();
				})
			},
			handleSelect(index) {
				this.selectedIndex = index;
			},
			handleSave() {
				this.$Api['user'].updateUserInfo({
					user_status: this.statusList[this.selectedIndex].status,
				}).then(res => {
					this.showOnline = false
					this.$Toast('保存成功')
					this.getUserInfo()
				})
			},
			handleClose() {
				this.showOnline = false
			},
			queryList(pageNo, pageSize) {
				this.$Api.user.getUserForumList({
					page: pageNo,
					limit: pageSize,
					user_id: this.userInfo.id
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
					this.selectedIndex = this.statusList.findIndex(item => {
						return item.status == res.data.user_status
					})
				})
			},
			openExternalBrowser(url) {
				// 判断平台：App 端使用 plus.runtime, H5 端使用 window.open
				// const platform = uni.getSystemInfoSync().platform
				// if(platform === 'android' || platform === 'ios'){
				// 	plus.runtime.openURL(url);
				// } else {
				// 	window.open(url, '_blank');
				// }
				uni.reLaunch({
					url: '/pages/home/index'
				})
			},
			sectionChange(index) {
				if (index == 0 && !this.isLogin) {
					this.$refs.lRef.open()
					return
				}
				this.currentTab = index;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.profile-page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffffff;

		.page-bg {
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			z-index: 1;
		}

		.page-content {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			z-index: 1;
			padding: 0 28rpx;

			::v-deep .zp-empty-view-center {
				position: absolute;
				top: 0;
				/* 调整这个百分比值 */
				left: 0;
				right: 0;
			}
		}

		.header {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #323334;
			background-color: rgba(255, 255, 255, 0.8);
			height: 48rpx;
			line-height: 48rpx;
			background: #FFFFFF;
			border-radius: 200rpx;
			margin-top: 40rpx;
			padding: 0 12rpx;
			width: fit-content;

			.icon_user {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		.user-info {
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.user-avatar-wrapper {
				position: relative;
				width: 168rpx;
				height: 168rpx;

				.user-avatar {
					width: 168rpx;
					height: 168rpx;
					border-radius: 50%;
					border: 2px solid #fff;
				}

				.camera-icon {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.login-section {
			margin-left: 20rpx;
			flex: 1;

			.login-text {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-box {
					display: flex;
					align-items: center;
					gap: 20rpx;
				}

				.login-title {
					font-size: 36rpx;
					color: #333333;
					font-weight: 600;
				}

				.vip-tag {
					width: 94rpx;
					height: 28rpx;

					.vip-icon {
						width: 100%;
						height: 100%;
					}
				}

				.settings {
					width: 40rpx;
					height: 40rpx;
					margin-right: 50rpx;
				}
			}

			.welcome-text {
				font-size: 26rpx;
				color: #AFAFAF;
				margin-top: 10rpx;
			}
		}

		.user-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.diamond-section {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10rpx;
				margin-top: 20rpx;
				width: 210rpx;
				height: 56rpx;
				background: #FFE9FC;
				border-radius: 8rpx;

				.diamond-icon {
					width: 28rpx;
					height: 28rpx;
				}

				.diamond-text {
					font-size: 24rpx;
					color: #F169F6;
				}
			}

			.unlock-btn {
				padding: 6rpx 20rpx;
				border-radius: 30rpx 0 0 30rpx;
				background: linear-gradient(90deg, #F9A2FB 0%, #F169F6 100%);
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				margin-right: -20rpx;

				.unlock-text {
					font-size: 12px;
					color: #ffffff;
				}
			}
		}

		.statistics {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding: 20rpx 66rpx 20rpx 52rpx;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-number {
					font-size: 32rpx;
					color: #222222;
					font-weight: 600;
				}

				.stat-label {
					font-size: 26rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}
		}

		.vip-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			background-image: url('../../static/mine/icon_bg.png');
			background-size: 100% 100%;

			.vip-left {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.vip-badge {
					width: 108rpx;
					height: 52rpx;
				}

				.vip-title {
					font-size: 30rpx;
					color: #3D2F11;
					font-weight: 600;
				}

				.vip-time {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #3D2F11;
				}
			}

			.vip-right {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				height: 48rpx;
				background: #5F3E23;
				border-radius: 200rpx;

				.vip-action {
					font-size: 24rpx;
					color: #FDE7BF;
					line-height: 48rpx;
					margin-right: 4rpx;
				}

				.vip-arrow {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.daily-bonus {
			display: flex;
			align-items: center;
			gap: 10rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #FFE9FC;
			border-radius: 10rpx;

			.bonus-icon {
				width: 24rpx;
				height: 24rpx;
			}

			.bonus-text {
				font-size: 24rpx;
				color: #F169F6;
			}
		}

		.tab-section {
			margin-top: 40rpx;
			width: 200rpx;
		}

		.dynamics-list {
			padding-bottom: 60rpx;
		}

		.dynamics-item {
			padding: 26rpx 20rpx;

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #323334;

				.icon-more {
					width: 6rpx;
					height: 28rpx;
				}
			}

			.item-center,
			.item-bottom {
				margin-left: 44rpx;
			}

			.item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				.bottom-left {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}

				.bottom-right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #9A9A9A;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}

			.item-content {
				font-size: 28rpx;
				color: #222222;
				margin: 20rpx 0rpx;
			}
		}

		.menu-list {
			margin-top: 30rpx;
			font-size: 26rpx;
			padding: 0 20rpx;

			.menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;

				.menu-icon {
					width: 40rpx;
					height: 40rpx;
				}

				.menu-text {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #333;
					flex: 1;
				}

				.menu-status {
					font-size: 28rpx;
					color: #222222;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
		}
	}

	.popup {
		&-container {
			background-color: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 40rpx 32rpx;
		}

		&-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 40rpx;
		}

		&-title {
			text-align: center;
			flex: 1;

			.title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.desc {
				display: block;
				font-size: 12px;
				color: #999999;
			}
		}
	}

	.close-btn {
		width: 28rpx;
		height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vip-info {
		display: flex;
		flex-direction: column;
		width: 356.42rpx;
		height: 200rpx;
		box-sizing: border-box;
		padding: 22rpx;
		border-radius: 20rpx;
		background-image: url("../../static/mine/vip_bg.png");
		background-size: 100% 100%;
		margin: 0 auto 70rpx;

		.vip-top {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.vip-badge {
				width: 74rpx;
				height: 36rpx;
			}

			.vip-title {
				font-size: 28rpx;
				color: #3D2F11;
			}
		}

		.vip-center {
			margin: 10rpx 0 16rpx;
			font-size: 34rpx;
			color: #5F3E23;
			font-weight: 600;
		}

		.vip-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			align-self: flex-end;
			width: 112rpx;
			height: 48rpx;
			background: #5F3E23;
			border-radius: 200rpx;

			.vip-action {
				font-size: 24rpx;
				color: #FDE7BF;
				line-height: 48rpx;
				margin-right: 4rpx;
			}

			.vip-arrow {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.tips-list {
		margin-top: 80rpx;
		margin-bottom: 62rpx;

		.tips-item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #9A9A9A;
			margin-top: 30rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #F169F6;
				margin-right: 10rpx;
			}
		}
	}

	.menupopup {
		&-list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-flow: row;
			grid-gap: 20rpx;
			margin-bottom: 40rpx;
		}

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&-icon {
			width: 84rpx;
			height: 84rpx;
		}

		&-text {
			font-size: 24rpx;
			text-align: center;
			margin-top: 10rpx;
		}
	}

	.status {
		&-list {
			margin-bottom: 40rpx;
		}

		&-item {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			transition: all 0.3s;

			&--selected {
				background-color: #F5F5F5;
			}
		}

		&-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-text {
			font-size: 28rpx;
			color: #333333;
			text-align: center;
		}
	}

	.button-wrapper {
		padding: 0 20rpx;
	}

	.save-button {
		width: 628rpx;
		height: 88rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		border-radius: 44rpx;

		&::after {
			border: none;
		}
	}

	.save-button2 {
		background: linear-gradient(135deg, #ECECEC 0%, #ECECEC 100%);
		border-radius: 16rpx;
		color: #000000;
	}
</style>